@import "src/core/index.module";

cl-table-container {
  padding-top: 10px;
}

.cl-table-statistic {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  height: 32px;
}

@mixin statistics-label {
  font-family: $font-family--base;
  font-size: 14px;
  padding: 0px;
  margin: 0px;
  color: $colors--neutral-6;
  line-height: $line-height--large;
  letter-spacing: 0.1px;
  display: flex;
  .label {
    font-family: $font-family--bold;
    color: $colors--neutral-7;
  }
}

.cl-count-title,
.last-cleared-title {
  @include statistics-label;
}

.cl-table-statistic {
  .cl-count-title {
    @include statistics-label;
  }
}

.section {
  flex: 0 0 auto;
  padding: 12px 24px 12px 0px;

  &--heading {
    padding-top: 0;
    padding-bottom: 0;
  }

  &--container {
    padding: 0 24px 0 0;
  }
}

.no-margin-bottom {
  margin-bottom: 0px;
}

.refresh-alert {
  margin-top: 5px;
  padding-top: 5px;
  display: flex;
  flex-direction: row;
}

.margin-bottom {
  margin-bottom: 10px;
}

.root {
  flex-grow: 0;
  width: 100%;
}

.table-area {
  position: relative;
  overflow-x: scroll;
  min-height: 590px;
}

.reset-btn-area {
  height: $line-height--larger;
  display: flex;
  align-items: center;
}

.app-filter-dropdown {
  /* 
    we are truncating the text in the filter, 
    but need to constrain to a width
  */
  max-width: 75ch;
}

.app-filter-dropdown-item {
  /*
    Truncating and constraining the width of the 
    items in the app filter dropdown
  */
  max-width: 80ch;
  @include text-overflow;
}

.full-table-scan-label {
  @include text--body;
  display: inline;
  font-size: 14px;
  color: $colors--title;
}

.reset-btn {
  background: transparent;
  border: none;
  color: $colors--primary-blue-3;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.filter-area {
  height: 40px;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.margin-top {
  margin-top: 20px;
}

.margin-adjusted {
  margin-top: 5px;
  margin-bottom: -15px;
}
